<template>
	<view class="ml-tiles">
		<image class="ml-tile" v-for="s in splits" :src="staticPath + s + '.gif'" mode=""></image>
	</view>
</template>

<script setup>
import { splitSingles } from 'efficiency-mahjong-utils';
import { computed } from 'vue';
const staticPath = '/static/tiles/';
const props = defineProps({
	tiles: {
		type: String,
		default: ''
	}
});

const splits = computed(() => splitSingles(props.tiles));
</script>

<style lang="less">
.ml-tiles {
	display: flex;
	align-items: center;
}

.ml-tile {
	width: 31px;
	height: 47px;
}
</style>
